<template>
    <div class="model_box" >
        <div class="model_box_back">
            <div class="item_box_header ">
                <div class="img_name">物品图</div>
                <div class="img_time">获取物品时间</div>
                <div class="img_number">次(第)</div>
            </div>
            <div :class="{item_box:true,ash:index%2==0}" v-for="(item,index) in arrayValue" :key="index">
                <div class="w_item_img">
                    <div class="item_img">
                        <img :src="getImageUrl(item.img)" alt="" srcset="">
                    </div>
                </div>
                <div class="obtain_time">
                    {{item.t}}
                </div>
                <div class="number">{{index+1}}</div>
            </div>
            <div style="display: flex;justify-content: center;">
                <button @click="downloadContent" class="download">点击下载内容</button> <!-- 添加的按钮 -->
            </div>
        </div>
    </div>
</template>
  
<script setup>
import { onMounted, ref } from 'vue';
import html2canvas from 'html2canvas'; // 引入html2canvas库
import { useRoute } from 'vue-router';
// 导入图片资源
import HongBao from '@/assets/img/hongbao.png';
import HongBaos from '@/assets/img/hongbao1.png';
import IconS from '@/assets/img/icon-.png';
import LingShiLiBao from '@/assets/img/libao.png';
import ShuPian from '@/assets/img/shupian_.png';
import SuCaiZhuangShi from '@/assets/img/sucaizhuangshi.png';
import TangGuo from '@/assets/img/tangguo.png';
import TangMuMao from '@/assets/img/tangmumao-.png';
import WenDuChuangQi from '@/assets/img/wenduchuanganqi.png';
import Xie from '@/assets/img/xie.png';
import XinXi from '@/assets/img/xinxi.png';
import latiaoImage from '@/assets/img/latiao.png';
import kaoxiangImage from '@/assets/img/kaoxiang-mianbaoa.png';

let arrayValue = ref(null);

const route = useRoute();

const getImageUrl = (imgName) => {
  switch (imgName) {
    case 'latiao':
      return latiaoImage;
    case 'kaoxiang-mianbaoa':
      return kaoxiangImage;
    case 'tangmumao-':
      return TangMuMao;
    case 'xinxi':
      return XinXi;
    case 'icon-':
      return IconS;
    case 'hongbao1':
      return HongBaos;
    case 'xie':
      return Xie;
    case 'WenDuChuangQi':
      return WenDuChuangQi;
    case 'tangguo':
      return TangGuo;
    case 'sucaizhuangshi':
      return SuCaiZhuangShi;
    case 'shupian_':
      return ShuPian;
    case 'libao':
      return LingShiLiBao;
    case 'hongbao':
      return HongBao;
    // 添加其他图片的映射
    default:
      return ''; // 可以根据需要设置默认值
  }
};

onMounted(() => {
    const arrayParam = route.query.array;
    if (arrayParam) {
        try {
            // 尝试将 array 参数的值解析为所需的数据类型
            arrayValue.value = JSON.parse(decodeURIComponent(arrayParam));
            arrayValue.value = arrayValue.value.map(item => {
                let imgName;
                switch (item.imgCode) {
                case 1:
                    imgName = 'hongbao';
                    break;
                case 2:
                    imgName = 'hongbao1';
                    break;
                case 3:
                    imgName = 'icon-';
                    break;
                case 4:
                    imgName = 'kaoxiang-mianbaoa';
                    break;
                case 5:
                    imgName = 'latiao';
                    break;
                case 6:
                    imgName = 'libao';
                    break;
                case 7:
                    imgName = 'shupian_';
                    break;
                case 8:
                    imgName = 'sucaizhuangshi';
                    break;
                case 9:
                    imgName = 'tangguo';
                    break;
                case 10:
                    imgName = 'tangmumao-';
                    break;
                case 11:
                    imgName = 'wenduchuanganqi';
                    break;
                case 12:
                    imgName = 'xie';
                    break;
                case 13:
                    imgName = 'xinxi';
                    break;
                default:
                    imgName = ''; // 可以根据需要设置默认值
                }
                return {
                    img: imgName,
                    id: item.d,
                    t: `${item.t}`
                };
                
            });
            console.log(arrayValue.value)
        } catch (error) {
            console.error('解析 array 参数时出错:', error);
        }
    } else {
        console.log('未找到 array 参数');
    }
});
function downloadContent() {
const targetElement = document.querySelector('.model_box_back');
    if (!targetElement) {
        console.error('未找到要绘制的目标元素');
        return;
    }
    const { clientWidth: width} = targetElement;
    const adjustedWidth = width + 10; // 增加额外宽度
    const adjustedHeight = arrayValue.value.length * 70+699; // 增加额外高度
    console.log(adjustedHeight)
    html2canvas(targetElement, {
        scale: 2,
        scrollX: 0,
        scrollY: 0,
        windowWidth: adjustedWidth,
        windowHeight: adjustedHeight
    }).then(canvas => {
        const link = document.createElement('a');
        link.href = canvas.toDataURL('image/png');
        link.download = 'content.png';
        link.click();
    }).catch(err => {
        console.error('绘制或下载出错', err);
    });
}
</script>

<style lang="scss" scoped>
    %center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.model_box {
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  @extend %center;
  width: 100%;
  height: 100vh;
  background: rgba(17, 23, 41, 0.85);
  backdrop-filter: blur(8px);
  animation: fadeIn 0.3s ease;

  .model_box_back {
    position: relative;
    width: 85%;
    max-width: 500px;
    height: auto;
    max-height: 75vh;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
    border-radius: 24px;
    padding: 24px;
    box-sizing: border-box;
    overflow-y: auto; // 确认是auto或者scroll，保证垂直滚动条正常显示
    box-shadow: 
      0 20px 40px rgba(0, 0, 0, 0.2),
      0 0 0 1px rgba(255, 255, 255, 0.1);
    animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);

    .item_box_header {
      display: flex;
      padding: 16px 0;
      margin-bottom: 16px;
      border-bottom: 2px solid rgba(0, 0, 0, 0.08);
      font-size: 15px;
      font-weight: 600;
      color: #2c3e50;
      letter-spacing: 0.5px;

      .img_name { flex: 3; @extend %center; }
      .img_time { flex: 7; @extend %center; }
      .img_number { flex: 2; @extend %center; }
    }

    .item_box {
      display: flex;
      height: 70px;
      margin: 12px 0;
      padding: 0 12px;
      border-radius: 12px;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
      overflow: visible; // 可以明确设置为visible，避免继承到不合适的overflow属性

      &::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(45deg, rgba(66, 153, 225, 0.1), rgba(99, 179, 237, 0.05));
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      &:hover {
        transform: translateX(8px) scale(1.02);
        
        &::before {
          opacity: 1;
        }

        .item_img img {
          transform: scale(1.12);
        }
      }

      .w_item_img {
        flex: 3;
        @extend %center;
        
        .item_img {
          width: 54px;
          height: 54px;
          border-radius: 12px;
          overflow: hidden;
          box-shadow: 
            0 4px 12px rgba(0, 0, 0, 0.1),
            0 0 0 1px rgba(0, 0, 0, 0.05);
          
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
          }
        }
      }

      .obtain_time {
        flex: 7;
        @extend %center;
        font-size: 14px;
        color: #4a5568;
        font-weight: 500;
      }

      .number {
        flex: 2;
        @extend %center;
        font-weight: 600;
        color: #2d3748;
        font-size: 15px;
      }
    }

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.03);
      border-radius: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.15);
      border-radius: 6px;
      
      &:hover {
        background: rgba(0, 0, 0, 0.25);
      }
    }
    .download {
        position: fixed;
        top: 5%;
        padding: 8px 16px; // 按钮内边距，调整按钮文本与边框的距离
        border: none; // 去除默认边框
        border-radius: 8px; // 圆角半径，使按钮更圆润，和页面中其他元素的圆角风格呼应
        font-size: 14px; // 字体大小
        font-weight: 500; // 字体粗细程度
        color: #2c3e50; // 文字颜色，与页面中其他文本颜色协调一致
        background-color: rgba(255, 255, 255, 0.8); // 背景颜色，半透明的白色，和页面整体的白色系背景相呼应且有一定层次感
        cursor: pointer; // 鼠标悬停时显示手指样式，表示可点击
        transition: all 0.3s ease; // 添加过渡效果，让交互更平滑

        &:hover {
            background-color: rgba(255, 255, 255, 0.9); // 鼠标悬停时背景颜色稍微变亮，增强交互反馈
            transform: translateY(-2px); // 按钮向上稍微移动一点，营造悬浮感
        }

        &:active {
            transform: translateY(0); // 点击时恢复原位，去除悬浮效果
        }
    }
  }
}

.ash {
  background: rgba(0, 0, 0, 0.02);
}

@keyframes fadeIn {
  from { 
    opacity: 0;
  }
  to { 
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 添加新的动画效果 */
.item_box {
  &:nth-child(odd) {
    animation: slideInLeft 0.5s ease-out backwards;
  }
  &:nth-child(even) {
    animation: slideInRight 0.5s ease-out backwards;
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
</style>